<template> 
	<view class="page">
		<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">

			<el-tab-pane label="广告回传设置" name="first">
				<el-alert title="因为订单总量未知,因此回传数量并不完全等于订单总量x回传比例.
				当你设置回传比例为50%时,100笔订单并不是一定回传50笔,可能是49也可能是51.数据总量越大,结果越接近此处设置的比例." type="success" :closable="false">
				</el-alert>
				<el-alert
					:title="'当前账户的用户名：'+vk.vuex.get('$user.userInfo.username')+' , 当前账户的代理商ID：'+vk.vuex.get('$user.userInfo._id')"
					type="error" :closable="false">
				</el-alert>
				<el-alert :title="'当前账户的佣金比例：'+vk.vuex.get('$user.userInfo.commission_rate')*100+'%'" type="error"
					:closable="false">
				</el-alert>
				<el-divider></el-divider>

				<view style="padding: 20px 0;">
					<el-switch v-model="huichuan.newuser" inactive-text="仅回传当日新用户的订单">
					</el-switch>
				</view>

				<view style="padding: 20px 0;" v-if="!huichuan.newuser">
					回传用户
				<vk-data-input-number
							v-model="huichuan.hour_backhaul" width="100px" :precision="0"
							placeholder="请输入数字"></vk-data-input-number>小时内的所有充值
				</view>



				<view class="">
					<el-switch v-model="huichuan.firstorder" inactive-text="仅回传用户的第一笔订单">
					</el-switch>
				</view>



				<el-divider></el-divider>

				<el-radio-group v-model="huichuan.douyinRadio" style="margin-top: 15px;">
					<el-radio :label="0" border>抖音单笔订单回传概率</el-radio>
					<el-radio :label="1" border>循环回传比例</el-radio>
				</el-radio-group>
				<div style="margin-top: 15px;width: 800px;" v-if="!huichuan.douyinRadio">
					<el-input placeholder="请输入内容" v-model="huichuan.douyin" type="number">
						<template slot="prepend">抖音单笔订单回传概率：</template>
						<template slot="append">%</template>
					</el-input>
				</div>

				<view style="margin-top: 15px;width: 800px;" v-else>
					<view style="font-size: 15rpx;color: grey;">当选择【循环回传比例】时,左侧值为上报,右侧值为不上报.
						例:若循环回传比为1:2,就是第1笔上报,第2、3笔不上报,第4笔上报,第5、6笔不上报,如此循环.
						<br/>开启【循环回传比例】时，建议关闭【仅回传当日新用户的订单】，【仅回传用户的第一笔订单】这两项，否则会影响循环比例的准确性</view>
					<view class="" style="margin-top: 15px;width: 800px;display: flex;">
						<el-input placeholder="请输入回传比例" v-model="huichuan.douyin_ReturnRatio" type="number">
							<template slot="prepend">抖音广告循环回传比例：</template>
						</el-input>
						<span style="font-size: 20px;font-weight: 700;margin: 0 15rpx;">:</span>
						<el-input placeholder="请输入不回传比例" v-model="huichuan.douyin_UnReturnRatio" type="number">
						</el-input>
					</view>

				</view>
				<div style="margin-top: 15px;width: 800px; display: flex;flex-wrap: nowrap;">
					<el-input placeholder="请输入内容" v-model="huichuan.douyinMinPrice" type="number">
						<template slot="prepend">【抖音】订单价格低于：</template>
						<template slot="append">元不回传</template>
					</el-input>
					<el-input placeholder="请输入内容" v-model="huichuan.douyinMaxPrice" type="number">
						<template slot="prepend">【抖音】订单价格高于：</template>
						<template slot="append">元不回传</template>
					</el-input>
				</div>
				
				<div style="margin-top: 15px;width: 800px;">
					<el-input placeholder="请输入内容" v-model="huichuan.douyin_url" type="text">
						<template slot="prepend">抖音广告资产化回传URL</template>
					</el-input>
				</div>

				<div style="margin-top: 15px;width: 800px;">
					<el-input placeholder="请输入内容" v-model="huichuan.douyin_token" type="text">
						<template slot="prepend">抖音广告资产化回传TOKEN</template>
					</el-input>
				</div>


				<el-radio-group v-model="huichuan.kuaishouRadio" style="margin-top: 15px;">
					<el-radio :label="0" border>快手单笔订单回传概率</el-radio>
					<el-radio :label="1" border>循环回传比例</el-radio>
				</el-radio-group>
				<div style="margin-top: 15px;width: 800px;" v-if="!huichuan.kuaishouRadio">
					<el-input placeholder="请输入内容" v-model="huichuan.kuaishou" type="number">
						<template slot="prepend">快手单笔订单回传概率：</template>
						<template slot="append">%</template>
					</el-input>
				</div>
				<div style="margin-top: 15px;width: 800px;display: flex;flex-wrap: nowrap;" v-else>
					<el-input placeholder="请输入回传比例" v-model="huichuan.kuaishou_ReturnRatio" type="number">
						<template slot="prepend">快手广告循环回传比例：</template>
					</el-input>
					<span style="font-size: 20px;font-weight: 700;">:</span>
					<el-input placeholder="请输入不回传比例" v-model="huichuan.kuaishou_UnReturnRatio" type="number">
					</el-input>
				</div>
				<div style="margin-top: 15px;width: 800px; display: flex;flex-wrap: nowrap;">
					<el-input placeholder="请输入内容" v-model="huichuan.kuaishouMinPrice" type="number">
						<template slot="prepend">【快手】订单价格低于：</template>
						<template slot="append">元不回传</template>
					</el-input>
					<el-input placeholder="请输入内容" v-model="huichuan.kuaishouMaxPrice" type="number">
						<template slot="prepend">【快手】订单价格高于：</template>
						<template slot="append">元不回传</template>
					</el-input>
				</div>
				
				<el-radio-group v-model="huichuan.tengxunRadio" style="margin-top: 15px;">
					<el-radio :label="0" border>腾讯单笔订单回传概率</el-radio>
					<el-radio :label="1" border>循环回传比例</el-radio>
				</el-radio-group>
				<div style="margin-top: 15px;width: 800px;" v-if="!huichuan.tengxunRadio">
					<el-input placeholder="请输入内容" v-model="huichuan.tengxun" type="number">
						<template slot="prepend">腾讯广告单笔订单回传概率：</template>
						<template slot="append">%</template>
					</el-input>
				</div>
				<div style="margin-top: 15px;width: 800px;display: flex;flex-wrap: nowrap;" v-else>
					<el-input placeholder="请输入回传比例" v-model="huichuan.tengxun_ReturnRatio" type="number">
						<template slot="prepend">腾讯广告循环回传比例：</template>
					</el-input>
					<span style="font-size: 20px;font-weight: 700;">:</span>
					<el-input placeholder="请输入不回传比例" v-model="huichuan.tengxun_UnReturnRatio" type="number">
					</el-input>
				</div>
				<div style="margin-top: 15px;width: 800px;display: flex;flex-wrap: nowrap;">
					<el-input placeholder="请输入内容" v-model="huichuan.tengxunMinPrice" type="number">
						<template slot="prepend">【腾讯】订单价格低于：</template>
						<template slot="append">元不回传</template>
					</el-input>
					<el-input placeholder="请输入内容" v-model="huichuan.tengxunMaxPrice" type="number">
						<template slot="prepend">【腾讯】订单价格高于：</template>
						<template slot="append">元不回传</template>
					</el-input>
				</div>
				

				<!-- <el-radio-group v-model="huichuan.ucRadio" style="margin-top: 15px;">
					<el-radio :label="0" border>UC回传比例</el-radio>
					<el-radio :label="1" border>循环回传比例</el-radio>
				</el-radio-group>
				<div style="margin-top: 15px;width: 800px;" v-if="!huichuan.ucRadio">
					<el-input placeholder="请输入内容" v-model="huichuan.uc" type="number">
						<template slot="prepend">UC广告回传比例：</template>
						<template slot="append">%</template>
					</el-input>
				</div>
				<div style="margin-top: 15px;width: 800px;display: flex;flex-wrap: nowrap;" v-else>
					<el-input placeholder="请输入回传比例" v-model="huichuan.uc_ReturnRatio" type="number">
						<template slot="prepend">UC广告循环回传比例：</template>
					</el-input>
					<span style="font-size: 20px;font-weight: 700;">:</span>
					<el-input placeholder="请输入不回传比例" v-model="huichuan.uc_UnReturnRatio" type="number">
					</el-input>
				</div>
				<div style="margin-top: 15px;width: 800px;">
					<el-input placeholder="请输入内容" v-model="huichuan.ucMinPrice" type="number">
						<template slot="prepend">【UC】订单价格低于：</template>
						<template slot="append">元不回传</template>
					</el-input>
				</div> -->


				<!-- <el-divider content-position="left">百度广告相关设置</el-divider> -->

				<el-radio-group v-model="huichuan.baiduRadio" style="margin-top: 15px;">
					<el-radio :label="0" border>百度单笔订单回传概率</el-radio>
					<el-radio :label="1" border>循环回传比例</el-radio>
				</el-radio-group>
				<div style="margin-top: 15px;width: 800px;" v-if="!huichuan.baiduRadio">
					<el-input placeholder="请输入内容" v-model="huichuan.baidu" type="number">
						<template slot="prepend">百度广告单笔订单回传概率：</template>
						<template slot="append">%</template>
					</el-input>
				</div>
				<div style="margin-top: 15px;width: 800px;display: flex;flex-wrap: nowrap;" v-else>
					<el-input placeholder="请输入回传比例" v-model="huichuan.baidu_ReturnRatio" type="number">
						<template slot="prepend">百度广告循环回传比例：</template>
					</el-input>
					<span style="font-size: 20px;font-weight: 700;">:</span>
					<el-input placeholder="请输入不回传比例" v-model="huichuan.baidu_UnReturnRatio" type="number">
					</el-input>
				</div>
				<div style="margin-top: 15px;width: 800px;display: flex;flex-wrap: nowrap;">
					<el-input placeholder="请输入内容" v-model="huichuan.baiduMinPrice" type="number">
						<template slot="prepend">【百度】订单价格低于：</template>
						<template slot="append">元不回传</template>
					</el-input>
					<el-input placeholder="请输入内容" v-model="huichuan.baiduMaxPrice" type="number">
						<template slot="prepend">【百度】订单价格高于：</template>
						<template slot="append">元不回传</template>
					</el-input>
				</div>
				
				<div style="margin-top: 15px;width: 800px;display: flex;flex-direction: row;">
					<el-input placeholder="请输入内容" v-model="huichuan.baidu_token" type="text">
						<template slot="prepend">百度回传token：</template>
					</el-input>
					<div style="width: 100px;margin-left: 15px;">
						<el-tooltip class="item" effect="dark" content="详见文档(2.2创建转化追踪-8)" placement="top-end">
							<el-link href="https://dev2.baidu.com/content?sceneType=0&pageId=101211&nodeId=658&subhead="
								target="_blank" :underline="false" type="primary">
								获取token的参考文档</el-link>
						</el-tooltip>
					</div>
				</div>

				<!-- <el-radio-group v-model="huichuan.oppoRadio" style="margin-top: 15px;">
					<el-radio :label="0" border>OPPO回传比例</el-radio>
					<el-radio :label="1" border>循环回传比例</el-radio>
				</el-radio-group>
				<div style="margin-top: 15px;width: 800px;" v-if="!huichuan.oppoRadio">
					<el-input placeholder="请输入内容" v-model="huichuan.oppo" type="number">
						<template slot="prepend">OPPO广告回传比例：</template>
						<template slot="append">%</template>
					</el-input>
				</div>
				<div style="margin-top: 15px;width: 800px;display: flex;flex-wrap: nowrap;" v-else>
					<el-input placeholder="请输入回传比例" v-model="huichuan.oppo_ReturnRatio" type="number">
						<template slot="prepend">OPPO广告循环回传比例：</template>
					</el-input>
					<span style="font-size: 20px;font-weight: 700;">:</span>
					<el-input placeholder="请输入不回传比例" v-model="huichuan.oppo_UnReturnRatio" type="number">
					</el-input>
				</div>
				<div style="margin-top: 15px;width: 800px;">
					<el-input placeholder="请输入内容" v-model="huichuan.oppoMinPrice" type="number">
						<template slot="prepend">【OPPO】订单价格低于：</template>
						<template slot="append">元不回传</template>
					</el-input>
				</div>

				<div style="margin-top: 15px;width: 400px;">
					<el-input placeholder="请输入内容" v-model="huichuan.oppo_owner_id" type="text">
						<template slot="prepend">OPPO->广告主ID：</template>
					</el-input>
				</div>

				<div style="margin-top: 15px;width: 400px;">
					<el-input placeholder="请输入内容" v-model="huichuan.oppo_api_id" type="text">
						<template slot="prepend">OPPO->api_id：</template>
					</el-input>
				</div>

				<div style="margin-top: 15px;width: 400px;">
					<el-input placeholder="请输入内容" v-model="huichuan.oppo_api_key" type="text">
						<template slot="prepend">OPPO->api_key：</template>
					</el-input>
				</div> -->



				<view style="padding: 2% 20%;">
					<el-button type="primary" @click="saveRebackPercent">保存</el-button>
				</view>
			</el-tab-pane>

			<!-- 	<el-tab-pane label="选项卡2" name="second">
				备用选项卡2
			</el-tab-pane>

			<el-tab-pane label="选项卡3" name="third">
				备用选项卡3
			</el-tab-pane> -->

		</el-tabs>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	const db = uniCloud.database();

	export default {
		data() {
			return {
				huichuan: {
					hour_backhaul: 24,
					douyin_url: "",
					douyin_token: "",
					douyinRadio: 0,
					kuaishouRadio: 0,
					tengxunRadio: 0,
					ucRadio: 0,
					baiduRadio: 0,
					oppoRadio: 0,
					douyin_ReturnRatio: 0,
					douyin_UnReturnRatio: 0,
					kuaishou_ReturnRatio: 0,
					kuaishou_UnReturnRatio: 0,
					tengxun_ReturnRatio: 0,
					tengxun_UnReturnRatio: 0,
					uc_ReturnRatio: 0,
					uc_UnReturnRatio: 0,
					baidu_ReturnRatio: 0,
					baidu_UnReturnRatio: 0,
					oppo_ReturnRatio: 0,
					oppo_UnReturnRatio: 0,
					firstorder: true,
					newuser: false,
					douyin: 100,
					douyinMinPrice: 0,
					douyinMaxPrice: 99999,
					kuaishou: 100,
					kuaishouMinPrice: 0,
					kuaishouMaxPrice: 99999,
					uc: 100,
					ucMinPrice: 0,
					baidu: 100,
					baiduMinPrice: 0,
					baiduMaxPrice: 99999,
					tengxun: 100,
					tengxunMinPrice: 0,
					tengxunMaxPrice: 99999,
					baidu_token: "",
					oppo: 100,
					oppoMinPrice: 0,
					oppo_owner_id: "",
					oppo_api_id: "",
					oppo_api_key: "",
				},
				activeName: 'first',
			};
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
		},
		async onShow() {
			let user_role = vk.vuex.get('$user.userInfo.role');
			if (user_role.includes("admin")) {
				this.$alert('这是代理商页面，管理员请勿操作。如需设置回传比例，请先创建一个代理商账号，登录代理商账号设置。', '提示', {
					confirmButtonText: '确定',
					callback: action => {
						uni.navigateTo({
							url: "/pages/admin/dlsgl/agent"
						})
						return;
					}
				});
			}
			this.loadData()
		},
		onReady() {

		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			async loadData() {
				//获取数据库里的回传比例
				vk.callFunction({
					url: 'agent/setting/kh/RebackPercent',
					title: '请求中...',
					data: {
						type: "get",
					},
					success: (data) => {
						if (data.RebackPercent.data.length > 0) {
							this.huichuan = data.RebackPercent.data[0]
						}
					}
				});
			},
			// 保存回传比例
			async saveRebackPercent() {
				//对提交的字符串去除首尾空格
				if (this.huichuan.douyin_url != '' && this.huichuan.douyin_url != null) {
					this.huichuan.douyin_url = this.huichuan.douyin_url.trim()
				}
				if (this.huichuan.douyin_token != '' && this.huichuan.douyin_token != null) {
					this.huichuan.douyin_token = this.huichuan.douyin_token.trim()
				}
				if (this.huichuan.baidu_token != '' && this.huichuan.baidu_token != null) {
					this.huichuan.baidu_token = this.huichuan.baidu_token.trim()
				}
				if (this.huichuan.oppo_owner_id != '' && this.huichuan.oppo_owner_id != null) {
					this.huichuan.oppo_owner_id = this.huichuan.oppo_owner_id.trim()
				}
				if (this.huichuan.oppo_api_id != '' && this.huichuan.oppo_api_id != null) {
					this.huichuan.oppo_api_id = this.huichuan.oppo_api_id.trim()
				}
				if (this.huichuan.oppo_api_key != '' && this.huichuan.oppo_api_key != null) {
					this.huichuan.oppo_api_key = this.huichuan.oppo_api_key.trim()
				}
				//用户选择循环模式则直接把普通模式回传比例设为100
				if (this.huichuan.douyinRadio == 1) {
					this.huichuan.douyin = 100
				}
				if (this.huichuan.kuaishouRadio == 1) {
					this.huichuan.kuaishou = 100
				}
				if (this.huichuan.tengxunRadio == 1) {
					this.huichuan.tengxun = 100
				}
				if (this.huichuan.ucRadio == 1) {
					this.huichuan.uc = 100
				}
				if (this.huichuan.baiduRadio == 1) {
					this.huichuan.baidu = 100
				}
				if (this.huichuan.oppoRadio == 1) {
					this.huichuan.oppo = 100
				}
				vk.callFunction({
					url: 'agent/setting/kh/RebackPercent',
					title: '请求中...',
					data: {
						type: "save",
						huichuan: this.huichuan
					},
					success: (data) => {
						this.$message({
							message: '保存成功',
							type: 'success'
						});
					}
				});

			},
		}
	};
</script>

<style>
	.page {
		padding-top: 20px;
	}

	.formview {
		width: 40%;
	}
</style>